<template>
  <div v-loading="loading">
    <div>
      <el-card>
        <el-row :gutter="30" class="flex align-center">
          <el-col :span="16">
            <span>{{ invoiceData.crmPapSource[invoiceData.invoicetype] }}</span>
            <span>发票备注：{{ invoiceData.invoiceremark }}</span>
          </el-col>
          <el-col :span="6">
            <span>开票日期</span>
            <el-date-picker
              size="mini"
              v-model="invoiceData.nowtime1"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="2" class="text-right">
            <el-button
              size="mini"
              type="primary"
              @click="balanceDetailList"
              :disabled="noSave"
              style="margin-left: 10px;"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div style=" width:100%">
      <el-card>
        <el-row :gutter="10" class="flex align-center">
          <el-col :span="1">
            <div
              class="title-box flex flex-direction align-center justify-around"
            >
              <span>购</span>
              <span>买</span>
              <span>方</span>
            </div>
          </el-col>
          <el-col :span="10">
            <el-form
              :model="invoiceData.customerInvoice"
              label-width="70px"
              size="mini"
            >
              <el-row>&nbsp;</el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="名称："
                    label-width="100px"
                    prop="invoiceName"
                  >
                    <el-input
                      size="mini"
                      v-model="invoiceData.customerInvoice.invoiceName"
                      type="text"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="纳税人识别号："
                    label-width="100px"
                    prop="inviIdentificaNumber"
                  >
                    <el-input
                      size="mini"
                      v-model.trim="
                        invoiceData.customerInvoice.inviIdentificaNumber
                      "
                      type="text"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话：" label-width="100px">
                    <el-input
                      size="mini"
                      v-model="invoiceData.customerInvoice.invoicePhone"
                      type="text"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="地址：" label-width="100px">
                    <el-input
                      size="mini"
                      v-model="invoiceData.customerInvoice.invoiceAddress"
                      type="text"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="开户行：" label-width="100px">
                    <el-input
                      size="mini"
                      v-model="invoiceData.customerInvoice.invoiceBankName"
                      type="text"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="银行账号：" label-width="100px">
                    <el-input
                      size="mini"
                      v-model.trim="invoiceData.customerInvoice.invoiceAccount"
                      type="text"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
          <el-col el-col :span="1">&nbsp;</el-col>
          <el-col el-col :span="1"> </el-col>
          <el-col el-col :span="1">
            <div
              class="title-box flex flex-direction align-center justify-around"
            >
              <span>密</span>
              <span>码</span>
              <span>区</span>
            </div>
          </el-col>

          <el-col :span="10">
            <el-form
              :model="invoiceData.customerInvoice"
              label-width="70px"
              size="mini"
            >
              <el-row>&nbsp;</el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="通知人手机：" label-width="100px">
                    <el-input
                      size="mini"
                      v-model="invoiceData.customerInvoice.invoiceReceivePhone"
                      type="text"
                      name="name"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="通知人邮箱：" label-width="100px">
                    <el-input
                      size="mini"
                      v-model="invoiceData.customerInvoice.invoiceReceiveEmail"
                      type="text"
                      name="name"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="订单号：" label-width="100px">
                    <span>{{ customerInvoice.orderNo }}</span>
                    <!-- <el-input
                      v-model="invoiceData.customerInvoice.orderNo"
                    ></el-input> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span class="title-icon">商品编码信息</span>
        </div>
        <HotTable
          ref="hottable"
          :templateData="tableData"
          :options="invoiceData.commdityCodes"
          @changeCommdity="changeCommdity"
        />
      </el-card>
      <el-card>
        <el-row class="flex align-center">
          <el-col :span="1">
            <div
              class="title-box flex flex-direction align-center justify-around"
            >
              <span>销</span>
              <span>售</span>
              <span>方</span>
            </div>
          </el-col>
          <el-col :span="10">
            <el-form
              :model="invoiceData.company"
              label-width="70px"
              size="mini"
            >
              <el-row>&nbsp;</el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="名称：" label-width="100px">
                    <span>{{ invoiceData.company.nameCn }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="纳税人识别号：" label-width="100px">
                    <span>{{ invoiceData.company.cinviIdentificaNumber }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话：" label-width="100px">
                    <span>{{ invoiceData.company.phone }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="地址：" label-width="100px">
                    <span>{{ invoiceData.company.addressCn }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form label-width="70px" size="mini">
                  <el-col :span="12">
                    <el-form-item label="开户行及账号：" label-width="100px">
                      <span>{{
                        invoiceData.companyBank
                          ? invoiceData.companyBank.bankName
                          : ""
                      }}</span>
                      &nbsp;&nbsp;&nbsp;
                      <span>{{
                        invoiceData.companyBank
                          ? invoiceData.companyBank.accountNo
                          : ""
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="12"> -->
                  <!-- </el-col> -->
                </el-form>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="收款人：" label-width="100px">
                    <span>{{
                      invoiceData.company ? invoiceData.company.payee : ""
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="复核人：" label-width="100px">
                    <span>{{
                      invoiceData.company ? invoiceData.company.checker : ""
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开票人：" label-width="100px">
                    <span>{{ invoiceData.userName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
          <el-col el-col :span="1">&nbsp;</el-col>
          <el-col el-col :span="1">
            <!-- <div style="height:100px;">
              <el-card shadow="never" style="height:230%; width:1px; ">
              </el-card>
            </div> -->
          </el-col>
          <el-col el-col :span="1">
            <div
              class="title-box flex flex-direction align-center justify-around"
            >
              <span>备</span>
              <span>注</span>
            </div>
          </el-col>
          <el-col :span="10">
            <el-form v-model="invoiceData" label-width="70px" size="mini">
              <el-row>&nbsp;</el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：" label-width="100px">
                    <el-input
                      type="textarea"
                      :rows="10"
                      placeholder="请输入内容"
                      v-model="invoiceData.remark"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<!-- 到此结束-->

<script>
import { ajax } from "@/store/yg/common/utils";
import LoginVue from "../../../../yg/auth/Login.vue";
import HotTable from "./components/HotTable";
import { m } from "@/store/yg/common/local";
import { clone } from "@/utils/clone";
export default {
  props: ["field"],
  components: {
    HotTable
  },
  data() {
    return {
      flag: true,
      noSave: false,
      loading: false,
      isPolicy: 0,
      customerInvoice: "",
      balanceDetailForm: {
        invoiceTime: new Date(),
        waybillNo: "",
        waybillId: "",
        serCusId: "",
        billType: "",
        costName: "",
        count: "",
        unitPrice: "",
        currency: "",
        totalCost: [],
        remain: "",
        accountDate: "",
        remark: "",
        totalMoney: "",
        money: "",
        textarea: ""
      },
      form: {
        waybillNoText: "",
        company: "",
        costName: "",
        number: "",
        unitPrice: "",
        currency: "",
        billTypeName: "",
        startAccountDate: "",
        remark: ""
      },
      rules: {
        customerId: [{ required: true, message: "请选择客户", trigger: "blur" }]
      },
      tableData: [],
      attrs: {
        class: "com.tofba.app.client.customer.SaleCustomerBillClient",
        uri: "/open/message",
        type: "blank"
      },
      account: "",
      invoiceData: {
        customerInvoice: {},
        company: {},
        crmPapSource: {},
        commdityCodes: []
      }
    };
  },
  mounted() {
    this.applyinvoice();
    // this.queryResults();
    console.log(this.$route.query.id);
  },
  methods: {
    changeCommdity(val) {
      this.isPolicy = val;
    },
    m(k) {
      return m(k);
    },
    async applyinvoice() {
      this.loading = true;
      var data = {};
      if (this.$route.query.ids) {
        console.log("合并账单---》");
        var params = {};
        params.strIds = this.$route.query.ids;
        if (this.$route.query.invoicetype) {
          params.invoicetype = this.$route.query.invoicetype;
        }
        if (this.$route.query.invoiceremark) {
          params.invoiceremark = this.$route.query.invoiceremark;
        }
        if (this.$route.query.customerInvoice) {
          params.customerInvoice = this.$route.query.customerInvoice;
        }
        if (this.$route.query.customerId) {
          params.customerId = this.$route.query.customerId;
        }

        const constDatas = await ajax(
          "applyMergeForInvoice",
          params,
          this.attrs
        );
        data = constDatas;
      } else {
        console.log("单个账单---》");
        const constData = await ajax(
          "toInvoice",
          { id: this.$route.query.id },
          this.attrs
        );
        data = constData;
      }
      this.loading = false;
      // console.log("data :>> ", data);
      if (data.success) {
        this.invoiceData = data;

        this.customerInvoice = data.customerInvoice;
        // 开户行
        this.invoiceData.customerInvoice.invoiceBankName =
          data.customerInvoice.invoiceBankName;
        // 银行账号
        this.invoiceData.customerInvoice.invoiceAccount =
          data.customerInvoice.invoiceAccount;
        this.invoiceData.customerInvoice.invoiceAddress =
          data.customerInvoice.invoiceAddress +
          " " +
          data.customerInvoice.invoicePhone;

        const m = data.commdityCodes.find(x => x.isDefault);
        this.isPolicy = m.isPolicy;
        this.tableData = [
          {
            num: 1,
            ratetotal: data.applyaccount,
            taxname: m.taxName,
            unitmeasure: m.unitMeasure,
            productmodel: m.productModel,
            price: data.applyaccount,
            rate: m.taxRate || 0,
            totalmoney: m.taxRate
              ? (m.taxRate * data.applyaccount).toFixed(2)
              : 0
          }
        ];
        // console.log("this.tableData :>> ", this.tableData);
      } else {
        this.$message.error(message || "获取数据错误");
        this.noSave = true;
      }
    },
    changeAccount(val) {
      // console.log("val :>> ", val);
    },
    async balanceDetailList() {
      const d = clone(this.invoiceData);
      const h = clone(this.$refs.hottable.tableData);

      const info = h.slice(0, h.length - 2);

      const arr = [];
      for (const i of info) {
        const row = {
          intaxname: i.taxname,
          intaxmeasure: i.unitmeasure,
          intaxproduct: i.productmodel,
          intaxnum: i.num,
          intaxprice: i.price,
          intaxratetotal: i.ratetotal,
          intaxrate: i.rate,
          intaxtotalmoney: i.totalmoney,
          ispolicy: this.isPolicy
        };
        arr.push(row);
      }

      const invoiceManageList = {};
      // invoiceManageList["ispolicy"] = this.isPolicy;
      if (this.$route.query.ids) {
        var salebillids = [];
        salebillids = this.$route.query.ids.split(",");
        invoiceManageList["salebillids"] = salebillids;
        if (this.$route.query.customerInvoice) {
          //无账单开票标识
          invoiceManageList["invoType"] = "noinvo";
        }
        if (this.$route.query.invoicetype) {
          invoiceManageList["invoicetype"] = this.$route.query.invoicetype;
        }
      } else {
        invoiceManageList["salebillid"] = this.$route.query.id;
      }

      invoiceManageList["salebillid"] = this.$route.query.id;
      invoiceManageList["invoicetime"] = d.nowtime1;
      invoiceManageList["createtime"] = d.nowtime;
      invoiceManageList["invoicemoney"] = h[h.length - 2].ratetotal.slice(1);
      invoiceManageList["totaltotalMoney"] = h[h.length - 2].totalmoney.slice(
        1
      );
      //开票方
      if (d.customerInvoice) {
        invoiceManageList["inname"] = d.customerInvoice.invoiceName;
        invoiceManageList["inidentificanum"] =
          d.customerInvoice.inviIdentificaNumber;
        invoiceManageList["inphone"] = d.customerInvoice.invoicePhone;
        invoiceManageList["inaddress"] = d.customerInvoice.invoiceAddress;
        invoiceManageList[
          "inaccount"
        ] = `${d.customerInvoice.invoiceBankName} ${d.customerInvoice.invoiceAccount}`;
        invoiceManageList["inreceivephone"] =
          d.customerInvoice.invoiceReceivePhone;
        invoiceManageList["inreceiveemail"] =
          d.customerInvoice.invoiceReceiveEmail;
        invoiceManageList["inorderno"] = d.customerInvoice.orderNo;
      }

      //购方
      if (d.company) {
        invoiceManageList["cpname"] = d.company.name;
        invoiceManageList["cpidentificanum"] = d.company.cinviIdentificaNumber;
        invoiceManageList["cpphone"] = d.company.phone;
        invoiceManageList["cpaddress"] = d.company.addressCn;
        invoiceManageList["cppayee"] = d.company.payee;
        invoiceManageList["cpchecker"] = d.company.checker;
        invoiceManageList["cpusername"] = d.userName;
        invoiceManageList["remark"] = d.remark;
      }

      invoiceManageList["cpaccountno"] = d.companyBank
        ? d.companyBank.accountNo
        : "";

      //详情
      invoiceManageList["invoiceListDetails"] = arr;
      // console.log("invoiceManageList :>> ", invoiceManageList);
      this.loading = true;
      const { success, message } = await ajax(
        "invoice",
        invoiceManageList,
        this.attrs
      );

      if (success) {
        this.$message.success("保存成功！");
      } else {
        this.$message.error(m(message));
      }
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.div-border {
  border-radius: 2px;
  height: 100px;
  /* border:1px solid #000; */
}

div {
  /* border-radius: 2px; */
  /* border:0.5px solid #000; */
}

.left {
  float: left;
}

.right {
  float: right;
}

.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 100%;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}

/deep/ .el-card {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.title-box {
  height: 140px;
  width: 32px;
  font-size: 14px;
  border: 1px solid #000000;
}

.height100 {
  height: 100%;
}
</style>
